<template>
  <div class="app-container">
    <div class="search-container">
      <el-form inline>
        <el-form-item label="名称">
          <el-input />
        </el-form-item>
        <el-button type="primary">搜索</el-button>
        <!-- <el-button type="success" @click="addAbility">新增能力评估</el-button>
        <el-button type="success" @click="operate('add')"
          >新增环境评估</el-button
        > -->
        <el-button type="primary">导入</el-button>
        <el-button type="primary">导出</el-button>
      </el-form>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="评估编号" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="老人姓名" width="120px" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="项目编号" align="center">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="评估时间" width="180" align="center">
        <template slot-scope="scope">
          {{ scope.row.display_time }}
        </template>
      </el-table-column>
      <el-table-column label="评估等级" align="center">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column label="评估人" width="110" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.author }}</span>
        </template>
      </el-table-column>

      <el-table-column
        class-name="status-col"
        label="完成进度"
        width="110"
        align="center"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{
            scope.row.status | statusFilterLabel
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="mini"
            v-if="scope.row.status == 0 || scope.row.status == 2"
            @click="add('ability')"
            >新增能力评估</el-button
          >
          <el-button
            type="warning"
            size="mini"
            v-if="scope.row.status == 0 || scope.row.status == 3"
            @click="add('env')"
            >新增环境评估</el-button
          >
          <el-button
            type="success"
            size="mini"
            @click="detail('ability', scope.row)"
            v-if="scope.row.status == 1 || scope.row.status == 3"
            >能力评估详情</el-button
          >
          <el-button
            type="success"
            size="mini"
            @click="detail('env', scope.row)"
            v-if="scope.row.status == 1 || scope.row.status == 2"
            >环境评估详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增环境评估 -->
    <el-dialog
      :visible.sync="envDialogVisible"
      :title="title"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form ref="form" :model="form" label-width="120px">
        <el-card>
          <div class="title-tip">入户门</div>
          <el-checkbox-group v-model="form.checked1" @change="handleChange1">
            <el-checkbox v-for="item in checkBox1" :label="item" :key="item">{{
              item
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
        <el-card>
          <div class="title-tip">卫生间</div>
          <el-checkbox-group v-model="form.checked2" @change="handleChange1">
            <el-checkbox v-for="item in checkBox2" :label="item" :key="item">{{
              item
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
        <el-card>
          <div class="title-tip">客厅和餐厅</div>
          <el-checkbox-group v-model="form.checked3" @change="handleChange1">
            <el-checkbox v-for="item in checkBox3" :label="item" :key="item">{{
              item
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
        <el-card>
          <div class="title-tip">卧室</div>
          <el-checkbox-group v-model="form.checked4" @change="handleChange1">
            <el-checkbox v-for="item in checkBox4" :label="item" :key="item">{{
              item
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
        <el-card>
          <div class="title-tip">阳台</div>
          <el-checkbox-group v-model="form.checked5" @change="handleChange1">
            <el-checkbox v-for="item in checkBox5" :label="item" :key="item">{{
              item
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
        <el-card>
          <div class="title-tip">厨房</div>
          <el-checkbox-group v-model="form.checked6" @change="handleChange1">
            <el-checkbox v-for="item in checkBox6" :label="item" :key="item">{{
              item
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
        <el-card>
          <div class="title-tip">其他</div>
          <el-checkbox-group v-model="form.checked7" @change="handleChange1">
            <el-checkbox v-for="item in checkBox7" :label="item" :key="item">{{
              item
            }}</el-checkbox>
          </el-checkbox-group>
        </el-card>
        <el-form-item label="用户对居家条件安全有何需求">
          <div class="flex">
            <div class="title-block">整体</div>
            <el-checkbox-group v-model="form.checked8" @change="handleChange1">
              <el-checkbox
                v-for="item in checkBox8"
                :label="item"
                :key="item"
                >{{ item }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="flex">
            <div class="title-block">浴室</div>
            <el-checkbox-group v-model="form.checked9" @change="handleChange1">
              <el-checkbox
                v-for="item in checkBox9"
                :label="item"
                :key="item"
                >{{ item }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="flex">
            <div class="title-block">卧室</div>
            <el-checkbox-group v-model="form.checked10" @change="handleChange1">
              <el-checkbox
                v-for="item in checkBox10"
                :label="item"
                :key="item"
                >{{ item }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
          <div class="flex">
            <div class="title-block">整体</div>
            <el-checkbox-group v-model="form.checked11" @change="handleChange1">
              <el-checkbox
                v-for="item in checkBox11"
                :label="item"
                :key="item"
                >{{ item }}</el-checkbox
              >
            </el-checkbox-group>
          </div>
        </el-form-item>
        <el-form-item label="居家条件适老化安全改善建议">
          <el-input type="textarea" v-model="form.remark" :rows="3" />
        </el-form-item>
        <el-form-item label="居家条件适老化改造需求评估总结及改善措施">
          <el-input type="textarea" v-model="form.detail" :rows="3" />
        </el-form-item>
        <el-form-item label="相关照片">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 环境评估详情 -->
    <el-dialog
      :visible.sync="envDetailVisible"
      :title="title"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-descriptions class="margin-top" :column="1" border>
        <el-descriptions-item label="入户门">
          {{ envForm.checked1.join("\n") }}
        </el-descriptions-item>
        <el-descriptions-item label="卫生间">
          {{ envForm.checked2.join("\n") }}
        </el-descriptions-item>
        <el-descriptions-item label="客厅和餐厅">
          {{ envForm.checked3.join("\n") }}</el-descriptions-item
        >
        <el-descriptions-item label="卧室">
          {{ envForm.checked4.join("\n") }}</el-descriptions-item
        >
        <el-descriptions-item label="阳台"
          >{{ envForm.checked5.join("\n") }}
        </el-descriptions-item>
        <el-descriptions-item label="厨房"
          >{{ envForm.checked6.join("\n") }}
        </el-descriptions-item>
        <el-descriptions-item label="其他"
          >{{ envForm.checked7.join("\n") }}
        </el-descriptions-item>
        <el-descriptions-item label="用户对居家条件安全有何需求">
          <p>整体：{{ envForm.checked8.join("\n") }}</p>
          <p>浴室：{{ envForm.checked9.join("\n") }}</p>
          <p>卧室：{{ envForm.checked10.join("\n") }}</p>
          <p>厨房：{{ envForm.checked11.join("\n") }}</p>
        </el-descriptions-item>
        <el-descriptions-item label="居家条件适老化安全改善建议"
          >{{ envForm.remark }}
        </el-descriptions-item>
        <el-descriptions-item label="居家条件适老化改造需求评估总结及改善措施"
          >{{ envForm.detail }}
        </el-descriptions-item>
        <el-descriptions-item label="相关照片"
          >{{ envForm.img }}
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="envDetailVisible = false">取 消</el-button>
        <el-button type="primary" @click="toEdit()">修改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList } from "@/api/table";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: "danger",
        1: "gray",
        2: "warning",
        3: "warning"
      };
      return statusMap[status];
    },
    statusFilterLabel(status) {
      const statusMap = {
        0: "未评估",
        1: "已完成",
        2: "待能力评估",
        3: "待环境评估"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      data: [
        {
          name: "张三",
          type: "完好",
          author: "李响",
          display_time: "2023-12-24 16:10:10",
          id: "2104623",
          pageviews: 1165,
          status: 3,
          place: "拱墅区"
        },
        {
          name: "李四",
          type: "半失能",
          author: "李响",
          display_time: "2023-12-24 16:10:10",
          id: "2104622",
          pageviews: 1165,
          status: 1,
          place: "拱墅区"
        },
        {
          name: "王五",
          type: "完全失能",
          author: "李响",
          display_time: "2023-12-24 16:10:10",
          id: "2104628",
          pageviews: 1165,
          status: 2,
          place: "拱墅区"
        },
        {
          name: "王五",
          type: "完全失能",
          author: "李响",
          display_time: "2023-12-24 16:10:10",
          id: "2104628",
          pageviews: 1165,
          status: 0,
          place: "拱墅区"
        }
      ],
      envDialogVisible: false,
      title: "新增巡检计划",
      personList: [{ label: "张三", value: "0" }],
      numList: [
        { label: "每年", value: "0" },
        { label: "每月", value: "1" },
        { label: "每日", value: "2" }
      ],
      typeList: [
        { label: "消防安全", value: "0" },
        { label: "食堂安全", value: "1" },
        { label: "护工查房", value: "2" }
      ],
      form: {},
      checkBox1: ["门把手改造", "地面防滑处理", "地面高差处理", "门槛移除"],
      checkBox2: [
        "蹲便器改坐便器",
        "浴登",
        "坐便器增高器",
        "浴缸/淋浴房改造",
        "防滑处理",
        "如厕扶手",
        "淋浴区扶手",
        "水龙头改造",
        "卫生间整体适老化改造"
      ],
      checkBox3: [
        "换鞋凳",
        "高差处扶手",
        "扶手定制",
        "照明优化",
        "安装防撞护角/防撞条"
      ],
      checkBox4: [
        "坐便椅",
        "安装感应夜灯（地灯）",
        "更换大按键开关面板",
        "床边扶手",
        "护理床",
        "便盆",
        "防压疮床垫"
      ],
      checkBox5: ["阳台安装可升降晾衣杆"],
      checkBox6: ["照明优化", "燃气泄漏报警器", "厨房操作台适老化改造"],
      checkBox7: ["手杖", "四角手杖", "轮椅", "墙面加固"],
      checkBox8: ["过道扶手", "防滑地垫"],
      checkBox9: ["沐浴辅具", "夜间照明灯"],
      checkBox10: ["床旁辅助", "防撞垫", "夜间照明灯"],
      checkBox11: ["防滑垫"],
      form: {
        checked1: [],
        checked2: [],
        checked3: [],
        checked4: [],
        checked5: [],
        checked6: [],
        checked7: [],
        checked8: [],
        checked9: [],
        checked10: [],
        checked11: [],
        remark: "",
        detail: ""
      },
      envDetailVisible: false,
      envForm: {
        checked1: ["门把手改造", "地面防滑处理", "门槛移除"],
        checked2: [
          "蹲便器改坐便器",
          "浴登",
          "坐便器增高器",
          "淋浴区扶手",
          "水龙头改造",
          "卫生间整体适老化改造"
        ],
        checked3: ["换鞋凳", "高差处扶手", "安装防撞护角/防撞条"],
        checked4: ["坐便椅", "便盆", "防压疮床垫"],
        checked5: ["阳台安装可升降晾衣杆"],
        checked6: ["照明优化", "燃气泄漏报警器", "厨房操作台适老化改造"],
        checked7: ["手杖", "四角手杖", "轮椅", "墙面加固"],
        checked8: ["过道扶手", "防滑地垫"],
        checked9: ["沐浴辅具", "夜间照明灯"],
        checked10: ["床旁辅助", "防撞垫", "夜间照明灯"],
        checked11: ["防滑垫"],
        remark: "XXX",
        detail: "XXX"
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      this.list = this.data;
      this.listLoading = false;
      // getList().then(response => {
      //   this.list = response.data.items
      //   this.listLoading = false
      // })
    },
    operate(type) {
      if (type === "add") {
        this.dialogVisible = true;
      }
    },
    add(type) {
      if (type == "ability") {
        // 新增能力评估
      } else {
        // 新增环境评估
        this.envDialogVisible = true;
        this.title = "新增环境评估";
        this.form = {
          checked1: [],
          checked2: [],
          checked3: [],
          checked4: [],
          checked5: [],
          checked6: [],
          checked7: [],
          checked8: [],
          checked9: [],
          checked10: [],
          checked11: [],
          remark: "",
          detail: ""
        };
      }
    },
    detail(type, row) {
      if (type == "ability") {
        // 能力评估
      } else {
        // 环境评估
        this.envDetailVisible = true;
        this.title = "环境评估详情";
      }
      // this.$router.push({ name: "ProjectDetail" });
    },
    toEdit() {
      this.envDetailVisible = false;
      this.envDialogVisible = true;
      this.title = "修改环境评估";
      this.form = JSON.parse(JSON.stringify(this.envForm));
    },
    handleChange1() {},
    onSubmit() {
      this.$message("submit!");
    },
    onCancel() {
      this.envDialogVisible = false;
    }
  }
};
</script>
<style scoped>
.line {
  text-align: center;
}
.el-card {
  margin-bottom: 10px;
}
.title-tip {
  color: #525050;
  font-weight: 600;
  margin-bottom: 10px;
}
.title-block {
  color: #525050;
  font-weight: 600;
  margin-right: 10px;
}
</style>
